<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #gpic{width:50px;height:80px}
    </style>
</head>
<body>


<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-inline" id="test6">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>
    </div>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table><!--lay-data="{id:'idTest'}"-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    //加载模块
    layui.use(['table','upload','element','layer','form','laydate'], function(){
        var table = layui.table
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer
        ,form = layui.form
        ,laydate = layui.laydate;

        //第一个实例
        table.render({
            elem: '#demo'
            //,height: 312  //表格的高度
            ,url: '/goods/all' //请求数据的后端接口
            ,page: true //开启分页,必须在后端返回总数目
            ,limit:3
            ,id:'idTest'
            ,limits:[3,6,9,12]
            ,cols: [[ //表头
                {field: 'gid', title: '编号', width:80, sort: true, fixed: 'left'}
                ,{field: 'gname', title: '商品名称', width:80}
                ,{field: 'price', title: '单价', width:80, sort: true}
                ,{field: 'num', title: '库存', width:80}
                ,{field: 'pic', title: '图片', width: 177,templet:function(r){//r一行数数
                    return '<img src="'+r.pic+'" width="50" height="50" />';
                    }}
                ,{field: 'pubdate', title: '日期', width: 150, sort: true}
                ,{field: 'type', title: '类别', width: 80, sort: true,templet:function(r){
                    return r.type.typename;
                    }}
                ,{fixed: 'right', title:'操作', width: 125,  toolbar: '#barDemo'}
            ]]
        });

        //操作列的事件绑定
        table.on('tool(test)', function(obj) { // 双击 toolDouble
            var data = obj.data;//当前行的数据
            console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {//当前被打开层的编号
                    obj.del();
                    //ajax向后端发数据,将数据从数据库删除，并且携带商品编号
                    // $.ajax({
                    //     url:'/goods/del/'+data.gid
                    // });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                //找开层之前提前获得表单中的数据
                // layui.$('#LAY-component-form-getval').on('click', function(){
                //     var data = form.val('example');
                //     alert(JSON.stringify(data));
                // });
                //取值 ：console.log(form.val('myfrm'));
                //给表单赋值 ：
                console.log("====",data.pic);
                $("#gpic").attr("src",data.pic);//用于在页面上显示 <img src="" />
                form.val('myfrm', {
                    "gid":data.gid
                    ,"gname": data.gname // "name": "value"
                    ,"price": data.price
                    ,"num": data.num
                    ,"pubdate": data.pubdate //复选框选中状态
                    ,"pic": data.pic  //在隐藏域中记录 //////////////////////////////////////////////////////////
                })
                ;
                //声明全局变量，用于存储当前打开的层的编号
                layernum=layer.open({
                    title: '编辑',
                    type: 1, //页面层
                    area: ['50%', '60%'], //弹出层的大小
                    shade:0, //关闭外层的遮挡
                    content: $("#frm"),
                    cancel: function(index, layero){
                        // if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                            layer.close(index);
                            //设置表单再次隐藏
                            $("#frm").css("display","none");
                        // }
                        return true;
                    }
                });
            }
        });

        //表单提交事件？？？  基本表单信息+图片地址-->Goods

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/goods/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#gpic').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                console.log(res);
                //如果上传失败
                if(res.code !=200){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $("#gpic").attr("src",res.data);
                //将隐藏域中记录的用图片地址作修改
                $("input[name=pic]").val(res.data);  // ///////////////////////////////////////////<input name="pic" />
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //异步提交
        form.on('submit(frmbtn)', function(data){
            //JSON.stringify 对象转字符串  JSON.parse("{name:'haha',id:10}") json串转为前端对象

            // alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            $.ajax({
                url:'/goods/update',
                data:data.field,
                type:'post',
                dataType:'json',
                success:function(res){
                    if(res.code==200){
                        //关闭表单
                        layer.close(layernum);
                        $("#frm").css("display","none");
                        //刷新表格
                        table.reloadData('idTest');
                       // alert("finish")
                    }
                }
            });

            return false;//取消同步提交
        });


        laydate.render({
            elem: '#test6'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            ,range: '=='  //两个时间之间的连接符
            ,done: function(value, date,date2){
                //layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date)+'<br>获得的对象是' + JSON.stringify(date2));
                //value:生成的时间
                //date：起始日期；date2：结束日期；
                var dates=value.split("==");
                //layer.alert(dates[0]+"====="+dates[1]);
                //按搜索条件重载数据表格
                //table.reloadData('idTest');
                table.reload('idTest', {
                    url: '/goods/search'
                    ,where: {
                        from:dates[0],
                        to:dates[1]
                    } //设定异步数据接口的额外参数
                    //,height: 300
                });
                // $.ajax({
                //     url:'/goods/search',
                //     data:{from:dates[0],to:dates[1]},
                //     type:'get',
                //     dataType:'json',
                //     success:function(res){
                //         //搜索查询到的结果是 res.data
                //         console.log(res.data);
                //         //将该结果填在表格数据里
                //
                //     }
                // });
            }
        });
    });
</script>


<form action=""  class="layui-form" id="frm" style="display: none;" lay-filter="myfrm">
    <input type="hidden" name="gid"/>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="gname" placeholder="请输入商品名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单价</label>
        <div class="layui-input-block">
            <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-inline">
                <input type="tel" name="num"  class="layui-input demo-phone">
            </div>
        </div>
    </div>
    <div class="layui-upload" style="margin:0px 0px 10px 30px;">
        <input type="hidden" name="pic"/>
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="gpic">
            <p id="demoText"></p>
        </div>
        <div style="width: 95px;">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
    </div>

    <a name="list-progress"> </a>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="date" name="pubdate" class="layui-input demo-phone">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmbtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

</body>
</html>